<template>
      <!-- table -->
  <section class="oa-form__table">
    <h5>{{approve.name}}</h5>
    <table cellpadding="0" cellspacing="0">
      <tr v-if="$route.query.from != 'new'">
        <td>事务编号1123</td>
        <td>{{approve.name}}<span v-if="approve && approve.code">{{approve.code}}</span></td>
      </tr>
      <tr>
        <td>流程名称</td>
        <td>
          <span v-if="$route.query.from == 'new'">
            新建{{approve.name}}
          </span>
          <span v-else>
            {{approve.approve_name}}
          </span>
        </td>
      </tr>
      <tr>
        <td>申请事由</td>
        <td :title="reason"><el-input placeholder="申请事由" type="textarea" v-model="reason" :disabled="$route.query.from != 'new'"/></td>
      </tr>
    </table>
    <h3 class="oa-form__table-title">
      <span v-if="$route.query.from === 'new'">{{approve.name}}</span>
      <span v-else>
            {{approve.approve_name}}
      </span>
    </h3>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="_name">申请人</td>
        <td>
          <el-select v-model="value" :disabled="$route.query.from != 'new'" placeholder="请选择"  @change="selectStaff($event)">
            <el-option
              v-for="item in staff"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          </td>
        <td class="_name">部门</td>
        <td>
          <el-select v-model="department" :disabled="$route.query.from != 'new'" placeholder="请选择">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </td>
        <td class="_name">申请日期</td>
        <td>{{applyTime}}</td>
      </tr>
      <tr>
        <td class="_name">申请事项</td>
        <td colspan="5">
          <el-input type="textarea" placeholder="请输入申请事项"  v-model="contents" :disabled="$route.query.from != 'new'" />
        </td>
      </tr>
      <tr>
        <td class="_name">人力资源意见</td>
        <td :title="obj.a946">
          <el-input type="textarea" placeholder="人力资源意见" v-model="obj.a946" disabled/>
        </td>
        <td class="_name">人力总监签字</td>
        <td :title="obj.a949">
          <el-input placeholder="行政总监签字" v-model="obj.a949"  :disabled="obj.a949Flag"/>
        </td>
        <td class="_name">日期</td>
         <td>
          <el-input v-model="obj.a952" disabled/>
        </td>
      </tr>
      <tr>
        <td class="_name">财务部意见</td>
        <td :title="obj.a933">
          <el-input type="textarea"  placeholder="财务部意见" v-model="obj.a933" disabled/>
        </td>
        <td class="_name">财务部签字</td>
        <td>
          <el-input placeholder="财务部签字" v-model="obj.a950" :disabled="obj.a950Flag"/>
        </td>
        <td class="_name">日期</td>
        <td>
          <el-input v-model="obj.a953" disabled/>
        </td>
      </tr>
      <tr>
        <td class="_name">总经理意见</td>
        <td :title="obj.a948">
          <el-input type="textarea"  placeholder="总经理意见" v-model="obj.a948"  disabled/>
        </td>
        <td class="_name">总经理签字</td>
        <td>
          <el-input placeholder="总经理签字" v-model="obj.a951" :disabled="obj.a951Flag"/>
        </td>
        <td class="_name">日期</td>
         <td>
          <el-input v-model="obj.a954" disabled/>
        </td>
      </tr>
    </table>
    <history :process="process"></history>
    <files></files>
  </section>
</template>
<script>
import { getOaSpecialEvent, getAutoKey, info } from '@/api/oa/index.js'
import { getToDayFunc } from '@/utils/domUtils.js'
import mixin from '@/mixins/index.js'
import history from './components/process'
import files from './components/files'
const obj = {}
for (let i = 941; i <= 954; i++) {
  obj[`a${i}`] = ''
  obj[`a${i}Flag`] = true
}
export default {
  name: '',
  mixins: [mixin],
  components: { history, files },
  props: ['curDepartment', 'userInfo', 'approve', 'staff', 'departments', 'process', 'addDofield', 'opinion'],
  data () {
    return {
      checkList: [],
      radio: 1,
      contents: '',
      reason: '',
      obj: JSON.parse(JSON.stringify(obj)),
      applyTime: getToDayFunc(),
      autoField: [],
      flag: false,
      value: '',
      department: '',
      truename: '',
      approve_id: 0,
      disabled: false,
      file_paths: [],
      file_names: [],
      field_ids: [],
      field_vals: []
    }
  },
  created () {
  },
  computed: {
    uploadArr () {
      return this.$store.state.uploadArr
    }
  },
  mounted () {
    if (this.$route.query.from === 'new') {
      this.disabled = true
    } else {
      this.infoFunc()
    }
  },
  watch: {
    opinion () {
      if (!this.obj.a948Flag) {
        this.obj.a948 = this.opinion
      }
      if (!this.obj.a933Flag) {
        this.obj.a933 = this.opinion
      }
      if (!this.obj.a946Flag) {
        this.obj.a946 = this.opinion
      }
    },
    // process () {
    //   this.processAuto()
    // },
    addDofield () {
      this.addDofieldRender()
    }
  },
  destroyed () {},
  methods: {
    getData () {
      if (this.uploadArr.length > 0) {
        this.uploadArr.forEach(item => {
          this.file_paths.push(item.path)
          this.file_names.push(item.name)
        })
      }
      const params = {
        // token: window.localStorage.getItem('token'),
        openid: window.localStorage.getItem('token'),
        contents: this.contents,
        reason: this.reason,
        department_id: this.department,
        truename: this.truename,
        apply_date: this.applyTime,
        approve_id: this.approve.id
      }
      const paths = new Set(this.file_paths)
      const names = new Set(this.file_names)
      params.file_paths = Array.from(paths).join()
      params.file_names = Array.from(names).join()
      if (this.field_ids.length > 0) {
        const paths = new Set(this.field_ids)
        const names = new Set(this.field_vals)
        params.field_ids = Array.from(paths).join()
        params.field_vals = Array.from(names).join()
      }
      if (!this.reason) {
        this.$message.error('请输入申请原因')
        return false
      }
      if (!this.contents) {
        this.$message.error('请输入申请事项')
        return false
      }
      getOaSpecialEvent(params).then((res) => {
        const { status } = res
        if (status) {
          this.$message.error('提交成功')
          this.goFrom()
        }
      })
      this.$store.commit('getUpload', [])
    },
    addDofieldRender () {
      this.addDofield && this.addDofield.forEach(e => {
        this.judge(e)
        if (e.val) {
          this.field_ids.push(e.field_id)
          this.field_vals.push(e.val)
        }
        return e
      })
      console.log('add', this.addDofield)
    },
    renderCustom () {
      this.autoField && this.autoField.forEach(e => {
        if (this.obj[`a${e.approve_field_id}`] !== undefined && e.approve_field_id) {
          this.$set(e, 'val', this.obj[`a${e.approve_field_id}`])
          this.obj[`a${e.approve_field_id}Flag`] = false
          if (e.val) {
            this.field_ids.push(e.approve_field_id)
            this.field_vals.push(e.val)
          }
        }
        return e
      })
      console.log(this.field_ids, this.field_vals)
    },
    infoFunc () {
      const params = {
        // token: window.localStorage.getItem('token'),
        openid: window.localStorage.getItem('token'),
        approve_id: this.approve.approve_id,
        workflow_id: this.approve.workflow_id
      }
      info(params).then(res => {
        const { status, data: { workflow }, data: { node } } = res
        if (status) {
          this.getAutoKey(workflow.approve_node_id)
          this.reason = workflow.reason
          this.contents = workflow.contents
          this.value = workflow.truename
          this.department = workflow.department_id
          this.applyTime = workflow.apply_date
          window.localStorage.setItem('approve_node_id', workflow.approve_node_id)
          window.localStorage.setItem('is_end', workflow.is_end)
          this.infoNodeFunc(node)
        }
      })
    },
    infoNodeFunc (node) {
      node && node.forEach(e => {
        e.fields && e.fields.forEach(j => {
          if (this.obj[`a${j.field_id}`] !== undefined) {
            this.obj[`a${j.field_id}`] = j.field_val
            this.obj[`a${j.field_id}Flag`] = true
            console.log(j.field_val)
          }
          return j
        })
        return e
      })
    },
    getAutoKey (id) {
      getAutoKey(id).then(res => {
        const { status, data } = res
        if (status) {
          this.autoField = data
          if (status) {
            this.autoField && this.autoField.forEach(e => {
              this.judge(e)
              return e
            })
          }
        }
      })
    },
    judge (e) {
      if (this.obj[`a${e.approve_field_id}`] !== undefined && e.approve_field_id) {
        this.$set(e, 'val', this.obj[`a${e.approve_field_id}`])
        this.obj[`a${e.approve_field_id}Flag`] = false
      }
      if (!this.obj[`a${e.field_id}`] && e.field_id) {
        this.obj[`a${e.field_id}`] = e.options
      }
      if (this.obj[`a${e.field_id}`] !== undefined && e.field_id) {
        this.$set(e, 'val', this.obj[`a${e.field_id}`])
        this.obj[`a${e.field_id}Flag`] = false
      }
      if (!this.obj.a952Flag && !this.obj.a952) {
        this.obj.a952 = getToDayFunc()
      }
      if (!this.obj.a953Flag && !this.obj.a953) {
        this.obj.a953 = getToDayFunc()
      }
      if (!this.obj.a954Flag && !this.obj.a954) {
        this.obj.a954 = getToDayFunc()
      }
    },
    submitFunc () {
      if (!this.flag) {
        this.flag = true
        this.getData()
        setTimeout(() => {
          this.flag = false
        }, 5000)
      }
    },
    //  选择申请人
    selectStaff (e) {
      this.truename = e.truename
      this.department = e.department_id
    },
    processAuto () {
    }
  }
}
</script>
